<template>
  <div class="home">
       <div class="header">
          <span>我的帖子</span>
      </div>
      
      <div class="content">
      <div class="context">v  
<div class="header_a">
    <el-tag class="h_a"><i class="el-icon-document"></i>我的帖子</el-tag>
    <span class="h_a">嘿~~，这就是你发的文章！</span>
    <span class="h_b"><i class="el-icon-edit-outline"></i>帖子数量:{{totle}}</span>
    </div>
<el-tabs type="border-card"  v-model="activeName" @tab-click="handleClick">
  <el-tab-pane name="all" >
    <span slot="label"><i class="el-icon-menu"></i> 全部</span>
    <div class="c_item" v-for="item in listDate" >
        <div class="c_it_content">
             <div class="avatars">
            <div class="av_h">
            <i class="el-icon-paperclip" ></i>
                 </div>
             </div>
        <div class="avatars"> 
        <div class="span"><span  @click="btnhead(item.inviteCode)">{{item.inviteTitle}}</span></div>
        <div class="b"><span> <el-tag  size="small">{{item.type}}</el-tag></span>
                    <span>创建时间：{{item.bytime}}</span>
        </div>
       
    </div>
        </div>
        <div class="c_item_right">
             <el-button type="primary" size='mini'  icon="el-icon-edit" circle @click="edit(item)"></el-button>
            <el-button size='mini' type="danger" icon="el-icon-delete" circle @click="deletes(item.inviteCode)"></el-button>
        </div>
    </div>
  </el-tab-pane>
</el-tabs>
  </div>
      </div>
      <edits ref="edit" @getData='getData'></edits>
      </div>
  
</template>

<script>
import API from '@/api/cate.js';
import edits from '../dialogs/edit';
export default {
    name:'myinvite',
    components:{
      edits
    },
    data(){
        return{
          rules:'',
            url:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2789251979,2162125395&fm=26&gp=0.jpg',
        listDate:[],
         activeName: 'all',
         totle:'',
        }
    },
    activated: function() {
    this.getData()
    },
  
    methods:{
        getData(){
            this.loading.startLoading();
         let obj1={
              userCode:sessionStorage.getItem("userCode")
        }
        //模块1
         this.$axios
            .post(API.getInvitaList, obj1)
            .then(res => {
              if (res.data.responseCode === 200) {   
                //   console.log(res.data.data.list);
                  this.listDate=res.data.data.list;
                  this.totle=this.listDate.length
              } else {
                 this.$message.error('没有数据');
                //  res.data.data.list
              }
            })
             this.loading.endLoading();
            },
             btnhead(val){
        console.log(val);
        // this.$router.go(0)
        this.$router.replace({path:'/contents',
        query:{
          inviteCode:val
          }})
      },
      //删除
      deletes(val){
          // deleteInvite
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          let obj1={
            invitCode:val
          }
           this.$axios
            .post(API.deleteInvite, obj1)
            .then(res => {
              if (res.data.responseCode === 200) { 
                this.getData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
              }
            }).catch(error=>{
               this.$message({
            type: 'error',
            message: '删除失败！'
          });   
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      handleClick(tab, event) { 
                console.log(tab.name);
    },
    edit(val){
      this.$refs.edit.open(true,val);
    }
}
}
</script>
<style scoped>
.home{
     /* background-image: url(http://127.0.0.1:9999/1574428850146.jpg); */
    background: #fff;
    width: 100%;
    height: 700px;
    text-align: center;
    margin: 0 auto;
    overflow: auto;
}
.content{
    padding-top: 50px;;
    width: 80%;
      margin: 0 auto;
}
.header{
    width: 100%;
    height: 200px;
    line-height: 200px;
    text-align: center;
    font-size: 72px;
    color: #fff;
    font-family: 'STKaiti';
    background-image: url(http://127.0.0.1:9999/1575334172734.jpg);
    /* background: rgb(134, 179, 10); */
}
.zhongjian{
        width: 100%;
        height: 400px;
        /* background: #ccc; */
}
.header_a{
    width: 100%;
    height: 40px;
    line-height: 40px;
}
.h_a{
    float: left;
    margin-right: 10px;
    color: rgb(38, 177, 241);
    cursor: pointer;
}
.h_b{
    float: right;
    margin-right: 10px;
    font-size: 12px;
     color: rgb(38, 177, 241);
}
.c_item{
    width: 100%;
    height: 70px;
    float: left;
    margin: 0 auto;
    border-bottom: 1px solid #ccc
}
.c_it_content{
    width: 50%;
    float: left;
}
.avatars{
    margin-right: 15px;
    height: 60px;
    line-height: 30px;
    float: left;
}
.avatars .av_h{
    padding-top: 10px;
}
.avatars .span{
    height: 50%;
    padding-left: 5px;
    width: 280px;
    text-align: left;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.avatars .b{
    height: 50%;
    color: rgb(250, 224, 191);
    padding-left: 5px;
    width: 280px;
    text-align: left;
    font-size: 10px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.c_item_right{
    height: 70px;
    line-height: 70px;
    float: right;
}
 .el-carousel__item h3 {
    color: #f8f9fa;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #f6f8fa;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #f7f8fa;
  }

   .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>

<style>

</style>